
<template>
  <div class="rating" ref="rating">
    <div class="menu-wrapper">
      <overView
        :serviceScore="seller.serviceScore"
        :foodScore="seller.foodScore"
        :deliveryTime="seller.deliveryTime"
        :score="seller.score"
        :rankRate="seller.rankRate"
      ></overView>
      <div
        class="border-1px(rgba(7,17,27,0.1))"
        style="margin:0;width:100%;height:18px;background-color:#f3f5f7"
      ></div>
      <div class="ratingselect-wraper">
        <ratingselect
          :selectType="selectType"
          @toggle="toggleContent"
          @selected="selectRating"
          :ratings="ratings"
          :desc="desc"
          :onlyContent="onlyContent"
        ></ratingselect>
      </div>
      <split></split>
      <div
        v-show="needShow(rating.rateType,rating.text)"
        class="ratings"
        v-for="(rating,index) in ratings"
        :key="index"
      >
        <div class="left">
          <img :src="rating.avatar" alt class="avatar" />
        </div>
        <div class="right">
          <div class="header">
            <span class="name">{{rating.username}}</span>
            <span class="time">{{rating.rateTime | formatDate}}</span>
          </div>
          <div class="rating-time">
            <span class="star">
              <star class="star" :score="rating.score" :size="24"></star>
            </span>
            <span v-show="rating.deliveryTime" class="deliveryTime">{{rating.deliveryTime}}分钟送达</span>
          </div>
          <div class="text">{{rating.text}}</div>
          <div class="desc">
            <span class="ratetype">
              <i class="icon-thumb_up"></i>
            </span>
            <span class="rateLable" v-for="(item,index) in rating.recommend" :key="index">{{item}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import overView from '@/components/ratings/overView'
import ratingselect from '@/components/goods/ratingselect'
import split from '@/common/split'
import star from '@/components/star/star'
import { formatRateData } from '@/common/formatData'
import BScroll from 'better-scroll'

// const POSITIVE = 0
// const NEGATIVE = 1
const ALL = 2
export default {
  name: 'rating',
  props: {
    ratings: {
      type: Array
    },
    seller: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data () {
    return {
      selectType: ALL,
      onlyContent: false,
      desc: {
        all: '全部',
        positive: '满意',
        negative: '不满意'
      }
    }
  },
  filters: {
    formatDate (time) {
      return formatRateData(time)
    }
  },
  methods: {
    // 选择评论类型
    selectRating (type) {
      this.selectType = type
    },
    // 选择只显示有评论的内容
    toggleContent () {
      this.onlyContent = !this.onlyContent
      console.log(this.onlyContent)
    },
    needShow (type, text) {
      if (this.onlyContent && !text) {
        return false
      }
      if (this.selectType === ALL) {
        return true
      } else {
        return type === this.selectType
      }
    }
  },
  mounted () {
    this.menuScroll = new BScroll(this.$refs.rating, {
      click: true
    })
  },

  components: { overView, ratingselect, split, star }
}
</script>
<style lang='stylus' scoped>
@import '../../common/stylus/mixin';

.rating {
  position: absolute;
  overflow: hidden;
  top: 174px;
  bottom: 10px;
  width: 100%;

  .ratingselect-wraper {
    margin: 0 18px;
  }

  .ratings {
    margin: 18px;
    display: flex;

    .left {
      width: 28px;
      height: 28px;
      // border-bottom 28px
      border-radius: 50%;
      margin-right: 12px;
      overflow: hidden;

      img {
        width: 28px;
      }
    }

    .right {
      flex: 1;

      .header {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 4px;

        .name {
          font-size: 10px;
          color: rgb(7, 17, 27);
          line-height: 12px;
        }

        .time {
          font-size: 10px;
          font-weight: 200;
          color: rgb(147, 153, 159);
          line-height: 12px;
        }
      }

      .rating-time {
        display: flex;
        margin-bottom: 6px;

        .star {
          margin-right: 6px;
        }

        .deliveryTime {
          flex: 1;
          font-size: 10px;
          font-weight: 200;
          color: rgb(147, 153, 159);
          line-height: 12px;
        }
      }

      .text {
        margin-bottom: 8px;
        font-size: 12px;
        color: rgb(7, 17, 27);
        line-height: 18px;
      }

      .desc {
        width: 100%;
        margin: 0;
        padding: 0;

        .ratetype {
          margin-right: 8px;

          .icon-thumb_up {
            font-size: 12px;
            color: rgb(0, 160, 220);
            line-height: 16px;
          }
        }

        .rateLable {
          margin-right: 8px;
          border: 1px solid rgba(7, 17, 27, 0.1);
          border-radius: 2px;
          background-color: #fff;
          padding: 0 6px;
          font-size: 9px;
          color: rgb(147, 153, 159);
          line-height: 16px;
          max-width: 5px;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
</style>
